<template>
  <el-menu
      :default-active="activeMenu"
      :default-openeds="openMenus"
      class="el-menu-vertical"
      router
      style="border-right: none"
      unique-opened
  >
    <el-menu-item index="/">
      <el-icon><House /></el-icon>
      <span>概览面板</span>
    </el-menu-item>

    <el-sub-menu index="/home/user" v-if="has('SYSTEM_ADMIN')">
      <template #title>
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="/home/userList">用户列表</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="/home/facility" v-if="has('SYSTEM_ADMIN')">
      <template #title>
        <el-icon><OfficeBuilding /></el-icon>
        <span>场所管理</span>
      </template>
      <el-menu-item index="/home/floorManagement">楼层管理</el-menu-item>
      <el-menu-item index="/home/roomManagement">房间管理</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="/home/loan" v-if="has('SYSTEM_ADMIN')">
      <template #title>
        <el-icon><Monitor /></el-icon>
        <span>仪器管理</span>
      </template>
      <el-menu-item index="/home/instrumentList">仪器列表</el-menu-item>
      <el-menu-item index="/home/instrumentSubTypeManage">子类型管理</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="/home/reservation" v-if="hasAny(['SYSTEM_ADMIN', 'LAB_REVIEW', 'MEETING_REVIEW', 'INSTRUMENT_REVIEW'])">
      <template #title>
        <el-icon><Tickets /></el-icon>
        <span>预约管理</span>
      </template>
      <el-menu-item index="/home/cubicleReservationList" v-if="has('LAB_REVIEW') || has('SYSTEM_ADMIN')">实验室预约申请</el-menu-item>
      <el-menu-item index="/home/meetingReservationManage" v-if="has('MEETING_REVIEW') || has('SYSTEM_ADMIN')">会议室预约申请</el-menu-item>
      <el-menu-item index="/home/instrumentReservationManage" v-if="has('INSTRUMENT_REVIEW') || has('SYSTEM_ADMIN')">仪器预约申请</el-menu-item>
      <el-menu-item index="/home/instrumentLoan" v-if="has('INSTRUMENT_REVIEW') || has('SYSTEM_ADMIN')">仪器借还申请</el-menu-item>
      <el-menu-item index="/home/notOutReservationList">未签退记录</el-menu-item>

    </el-sub-menu>

    <el-sub-menu index="/home/system" v-if="has('SYSTEM_ADMIN')">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>系统配置</span>
      </template>
      <el-menu-item index="/home/timeRuleManagement">预约时间规则</el-menu-item>
      <el-menu-item index="/home/roleManagement">管理员角色</el-menu-item>
      <el-menu-item index="/home/adminManagement">管理员列表</el-menu-item>
      <el-menu-item index="/home/systemSettings">参数配置</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { ElMenu, ElMenuItem, ElSubMenu, ElIcon } from 'element-plus'
import { House, User, OfficeBuilding, Tickets, Monitor, Setting } from '@element-plus/icons-vue'


let permissions = [];
try {
  permissions = JSON.parse(localStorage.getItem("adminPermissions") || '[]');
} catch (e) {
  permissions = [];
}

// 权限判断函数
function has(permission: string): boolean {
  return permissions.includes('SYSTEM_ADMIN') || permissions.includes(permission)
}
function hasAny(perms: string[]): boolean {
  return perms.some(p => has(p))
}

// 当前选中路由
const route = useRoute()
const activeMenu = computed(() => route.path)

// 自动展开的父菜单
const openMenus = computed(() => {
  const path = route.path
  if (path.includes('user')) return ['/home/user']
  if (path.includes('facility') || path.includes('floor') || path.includes('room')) return ['/home/facility']
  if (path.includes('loan')) return ['/home/loan']
  if (path.includes('reservation')) return ['/home/reservation']
  if (path.includes('system')) return ['/home/system']
  return []
})
</script>

<style scoped>
.el-menu-vertical {

  min-height: 100%;
}
</style>
